<template>
  <div class="mask">
    <el-button type="info"
               icon="el-icon-close"
               class="closeButton"
               @click="$emit('close')"
               circle></el-button>
    <div class="isVideo"> <video controls
             autoplay
             class="videoBox"
             :src="videoUrl"></video></div>
  </div>
</template>

<script>
export default {
  name: 'interviewVideo',
  props: {
    videoUrl: {
      type: String,
      require: true
    }
  }
}
</script>

<style lang="less" scoped>
.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  position: fixed;
  z-index: 9999;
  .closeButton {
    position: absolute;
    left: 50%;
    top: 5%;
    font-size: 20px;
    transform: translateX(-50%);
  }
  .isVideo {
    .videoBox {
      position: absolute;
      left: 50%;
      top: 10%;
      transform: translate(-50%);
      width: 680px;
      height: 500px;
      object-fit: fill;
    }
  }
}
</style>